<#assign base=request.contextPath/>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>问题列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="${base}/wx/css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/wx/css/ylkj.css" />
    
    <style type="text/css">
		html {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}

		.db {
			display: block;
		}

		.weixinAudio {
			line-height: 1.5;
		}

		.audio_area {
			display: inline-block;
			width: 400px;
			vertical-align: top;
			margin: 0px 1px 0px 0;
			font-size: 0;
			position: relative;
			font-weight: 400;
			text-decoration: none;
			-ms-text-size-adjust: none;
			-webkit-text-size-adjust: none;
			text-size-adjust: none;
		}

		.audio_wrp {
			/*border: 1px solid #ebebeb;*/
			position: relative;
			background-color: #00FA9A;
			overflow: hidden;
			padding: 12px 20px 12px 12px;
			border-radius: 8px;
			padding-right: 10px;
		}

		.audio_play_area {
			float: left;
			margin: 9px 22px 10px 5px;
			font-size: 0;
			width: 18px;
			height: 25px;
		}

		.playing .audio_play_area .icon_audio_default {
			display: block;
		}

		.audio_play_area .icon_audio_default {
			background: transparent url(${base}/wx/img/iconloop.png) no-repeat 0 0;
			width: 18px;
			height: 25px;
			vertical-align: middle;
			display: inline-block;
			-webkit-background-size: 54px 25px;
			background-size: 54px 25px;
			background-position: -36px center;
		}

		.audio_play_area .icon_audio_playing {
			background: transparent url(${base}/wx/img/iconloop.png) no-repeat 0 0;
			width: 18px;
			height: 25px;
			vertical-align: middle;
			display: inline-block;
			-webkit-background-size: 54px 25px;
			background-size: 54px 25px;
			-webkit-animation: audio_playing 1s infinite;
			background-position: 0px center;
			display: none;
		}

		.audio_area .pic_audio_default {
			display: none;
			width: 18px;
		}

		.tips_global {
			color: #8c8c8c;
		}

		.audio_area .audio_length {
			float: right;
			font-size: 14px;
			margin-top: 3px;
			margin-left: 1em;
		}

		.audio_info_area {
			/*overflow: hidden;*/
			position: relative;
			width: 80%;
		}

		.audio_area .audio_title {
			font-weight: 400;
			font-size: 17px;
			width: auto;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
		}

		.audio_area .audio_source {
			font-size: 14px;
		}

		.audio_area .progress_bar {
			position: absolute;
			left: 20;
			bottom: 12.5;
			/*background-color: #0cbb08;*/
			background-color:black;
			height: 2px;
		}
		
		.audio_area .progress_bar_background {
			position: absolute;
			left: 20;
			bottom: 12.5;
			/*background-color: #0cbb08;*/
			background-color:lightgray;
			height: 2px;
		}

		.playing .audio_play_area .icon_audio_default {
			display: none;
		}

		.playing .audio_play_area .icon_audio_playing {
			display: inline-block;
		}

		@-webkit-keyframes audio_playing {
			30% {
				background-position: 0px center;
			}
			31% {
				background-position: -18px center;
			}
			61% {
				background-position: -18px center;
			}
			61.5% {
				background-position: -36px center;
			}
			100% {
				background-position: -36px center;
			}
		}
	</style>
</head>
<body>
    
    <script src="${base}/wx/js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
    mui.init()
    </script>
    
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">咨询浏览</h1>
    </header>
    
    <div class="mui-content">
        <ul class="mui-table-view">
        <#list questionList as question>
            <li class="mui-table-view-cell mui-media">
                <p class="que-desc">${question.content}</p>
                <p class="law_signature_detail">
                	<span>${question.lawyerName}律师</span>
                	<span>${question.province}-${question.city}　${question.lawfirmName}</span>
                	<span><a href="${base}/question/questionDetail.do?queId=${question.questionId}">详细</a></span>
                </p>
                <div>
                		<img class="photo-img" src="${base}/wx/images/shuijiao.jpg" alt="${question.lawyerName}律师" >
                        <div class="weixinAudio audio-position" style="display: inline-block;" >
							<audio src="${base}/wx/sound/sound.mp3" id="media" width="1" height="1" preload></audio>
							<span id="audio_area" class="db audio_area">
								<span class="audio_wrp db">
									<span class="audio_play_area">
										<i class="icon_audio_default" style="color:red"></i>
										<i class="icon_audio_playing" style="color:red"></i>
						            </span>
									<span id="audio_length" class="audio_length tips_global">3:07</span>
									<span class="db audio_info_area">
						                <strong id="audio_title" class="db audio_title">点击播放</strong>
						                <span  class="progress_bar_background" style="width: 100%;" </span>
									    <span id="audio_progress" class="progress_bar" style="width: 0%"></span>
									</span>
								</span>
							</span>
						</div>
            	</div>
            </li>
         </#list>    
         
        </ul>
    </div>
    <script type="text/javascript" src="${base}/wx/js/jquery/1.9.1/jquery.js"></script>
    
   <!--  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
	<script src="${base}/wx/js/weixinAudio.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$('.weixinAudio').weixinAudio();
	</script>
	
    <script >
    //http://www.cnblogs.com/liujunyang/p/4962423.html
    var appId;
    var timeStamp;
    var nonce;
    var sigNature;
    var localId;
    var serverId;
    
    	
    	/*$.ajax({ url: "http://piaqj110487.bj.cdnjsp.com.cn/ylkj/sign/index.do",  success: function(data){
    		appId = data.appId;
    		timeStamp = data.timeStamp;
    		nonce = data.nonce;
    		sigNature = data.sigNature;
    		wx.config({
    		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    		    appId: appId, // 必填，公众号的唯一标识
    		    timestamp: timeStamp, // 必填，生成签名的时间戳
    		    nonceStr: nonce, // 必填，生成签名的随机串
    		    signature: sigNature,// 必填，签名，见附录1
    		    jsApiList: ['startRecord','stopRecord','onVoiceRecordEnd','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice','downloadVoice'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    		});
          }});*/
    	
    	wx.error(function(res){

    	    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

    	});
    function upLoad(){
    	wx.ready(function(){
    		
    		 wx.uploadVoice({
		    	    localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
		    	    isShowProgressTips: 1, // 默认为1，显示进度提示
		    	        success: function (res) {
		    	        var serverId = res.serverId; // 返回音频的服务器端ID
		    	        alert("上传录音成功！");
		    	      //调用ajax请求后台下载音频存到自己的服务器
		     	          $.ajax({ url: "http://piaqj110487.bj.cdnjsp.com.cn/ylkj/media/saveVoice.do", 
		     	        	 data:{"serverId":serverId},
		     	        	 success: function(data){
		     	        		 alert(data+"保存本地库成功");
		     	        		/* $('.weixinAudio').weixinAudio({
		     	       			autoplay:false,
		     	       			//src:'http://piaqj110487.bj.cdnjsp.com.cn/ylkj/ylkj/file/123.amr',
		     	       			src:data, 
		     	       		});*/
		     	        	 },
		     	             error: function (xhr, errorType, error) {
			                    console.log(error);
			                }
		     	         }); 
		    	    }
		    	});
    	});
    }
  
var START,recordTimer,END;
//按下开始录音
wx.ready(function(){
$('#talk_btn').on('touchstart', function(event){
    event.preventDefault();
    START = new Date().getTime();

    recordTimer = setTimeout(function(){
        wx.startRecord({
            success: function(){
                localStorage.rainAllowRecord = 'true';
            },
            cancel: function () {
                alert('用户拒绝授权录音');
            }
        });
    },300);
});
//松手结束录音
$('#talk_btn').on('touchend', function(event){
    event.preventDefault();
    END = new Date().getTime();
    
    if((END - START) < 300){
        END = 0;
        START = 0;
        //小于300ms，不录音
        clearTimeout(recordTimer);
    }else{
        endLuyin();
    }
});
});
   function endPlay()
    {
    	wx.ready(function(){
    	wx.stopVoice({
    	    localId: localId // 需要停止的音频的本地ID，由stopRecord接口获得
    	});
    	});
    }
    function play(){
    	wx.ready(function(){
    	wx.playVoice({
    	    localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
    	});
    	})
    }
    function endLuyin(){
    	wx.stopRecord({
          success: function (res) {
            //voice.localId = res.localId;
            localId = res.localId;
            uploadVoice();
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
    	/*wx.ready(function(){
    		wx.stopRecord({
    		    success: function (res) {
    		        localId = res.localId;
    		    }
    		});
    	});*/
    }
    function luyin(){	
    	wx.ready(function(){

    	    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    		wx.startRecord();
    		 // 4.4 监听录音自动停止
    		  wx.onVoiceRecordEnd({
    		    complete: function (res) {
    		      voice.localId = res.localId;
    		      alert('录音时间已超过一分钟');
    		      wx.uploadVoice({
    		    	    localId: res.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
    		    	    isShowProgressTips: 1, // 默认为1，显示进度提示
    		    	        success: function (res) {
    		    	        var serverId = res.serverId; // 返回音频的服务器端ID
    		    	        alert("上传录音成功！");
    		    	    }
    		    	});
    		    }
    		  });
    		  // 4.8 监听录音播放停止
    		  wx.onVoicePlayEnd({
    		    complete: function (res) {
    		      alert('录音（' + res.localId + '）播放结束');
    		    }
    		  });
    	});
    }
    </script>
</body>
</html>
